<template>
	<div class="app-container">
		<el-container>
			<el-header><b>考试结束，本次考试结果如下</b></el-header>
			<el-main>
				<el-row :gutter="20">
					<el-col :span="12" :offset="9">
						<el-card shadow="hover" style="width: 480px;">
							<el-form>
								<el-form-item class="formitem" label="试卷标题:">
									<el-link type="primary" disabled class="link">{{ formLabelAlign.titile }}</el-link>
								</el-form-item>
								<el-form-item class="formitem" label="考试姓名:">
									<el-link type="primary" disabled class="link">{{ formLabelAlign.name }}</el-link>
								</el-form-item>
								<el-form-item class="formitem" label="考试得分:">
									<el-link type="primary" disabled class="link">{{ formLabelAlign.fraction }}</el-link>
								</el-form-item>
								<el-form-item class="formitem" label="评卷方式:">
									<el-link type="primary" disabled class="link">{{ formLabelAlign.hascompletion }}</el-link>
								</el-form-item>
								<el-form-item class="formitem" label="最终结果:">
									<el-link type="primary" disabled class="link">{{ formLabelAlign.result }}</el-link>
								</el-form-item>
								<el-form-item>
									<el-button type="danger" @click="onClose">关闭页面</el-button>
								</el-form-item>
							</el-form>
						</el-card>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>

<script>
import { DoResult } from '@/api/exam';
export default {
	data() {
		return {
			labelPosition: 'top',
			formLabelAlign: {
				name: '',
				region: '',
				type: ''
			},
			info: {},
			data: {}
		};
	},
	mounted() {
		this.info = decodeURI(this.$route.query.info);
		this.initInfo();
	},
	methods: {
		initInfo() {
			var _this = this;
			DoResult(this.info).then(res => {
				console.log(res.data)
				_this.formLabelAlign = res.data;
				console.log(_this.formLabelAlign)
			});
		},onClose(){
			this.closeWindow();
		},closeWindow: function() {
				this.$router.push({ path: '/'});
		}
	}
};
</script>

<style>
.link {
	font-size: 12px;
}

.item {
	margin-bottom: 18px;
}
.el-header,
.el-footer {
	background-color: #b3c0d1;
	color: #333;
	text-align: center;
	line-height: 60px;
}

.el-aside {
	background-color: #d3dce6;
	color: #333;
	text-align: center;
	line-height: 200px;
}

.el-main {
	background-color: #e9eef3;
	color: #333;
	text-align: center;
}

body > .el-container {
	margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
	line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
	line-height: 320px;
}
</style>
